<template>
    <div class='mainDivClassYA'>
     <div class='topBox'>
      <div class='leftBox'>
        <div class='PictureClass' style="margin-top: 5%">
          <img src="../../../views/Home/Components/image/yeya.png"  width="300"/>
        </div>
        <div class='TitleClass'>
          <span>液压站</span>
        </div>
      </div>
      <div class='rightBox'>
        <div style="height: 25%;width: 100%; display: flex;margin-top: 5%">
          <div class="ValueTitleClass">0#液压站散热系统工作模式:</div>
          <div class="ValueClass">{{dataList_Y1.Hstation0Coolsystem_Mode | ModeFun}}</div>
          <div class="ValueTitleClass">1#液压站散热系统工作模式:</div>
          <div class="ValueClass">{{dataList_Y2.Hstation1Coolsystem_Mode | ModeFun}}</div>
        </div>
        <div style="height: 25%;width: 100%; display: flex;">
          <div class="ValueTitleClass">2#液压站散热系统工作模式:</div>
          <div class="ValueClass">{{dataList_Y3.Hstation2Coolsystem_Mode | ModeFun}}</div>
          <div class="ValueTitleClass">3#液压站散热系统工作模式:</div>
          <div class="ValueClass">{{dataList_Y4.Hstation3Coolsystem_Mode | ModeFun}}</div>
        </div>
      </div>
    </div>
      <div class='bottomBox'>
        <div class="tableDiv">
          <table class="tableClass">
            <tr style="font-size: 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: skyblue ">
              <td style="width: 20%;text-align: center">
                0#液压站
              </td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站散热系统/电源指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Coolsystem_State_Power}}</td>
              <td class="TDClassTitle">液压站散热系统/运行指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Coolsystem_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor1_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor1_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站油泵电机2#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor2_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机2#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor2_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机3#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor3_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机3#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0Motor3_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站报警后强制启动模式</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0_Alarm_Forcesrun}}</td>
              <td class="TDClassTitle">液压站报警自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0_Alarm_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y1.Hstation0_Standby_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机倒计时</td>
              <td class="TDClassVal">{{dataList_Y1. Hstation0_Standby_Time}}</td>
            </tr>
            <tr style="font-size: 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: skyblue ">
              <td style="width: 20%;text-align: center">
                1#液压站
              </td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站散热系统/电源指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Coolsystem_State_Power}}</td>
              <td class="TDClassTitle">液压站散热系统/运行指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Coolsystem_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Motor1_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Motor1_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站油泵电机2#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Motor2_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机2#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1Motor2_State_Run}}</td>
              <td class="TDClassTitle">液压站报警后强制启动模式</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1_Alarm_Forcesrun}}</td>
              <td class="TDClassTitle">液压站报警自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1_Alarm_Poweroff}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站无动作自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1_Standby_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机倒计时</td>
              <td class="TDClassVal">{{dataList_Y2.Hstation1_Standby_Time}}</td>
            </tr>
            <tr style="font-size: 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: skyblue ">
              <td style="width: 20%;text-align: center">
                2#液压站
              </td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站散热系统/电源指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Coolsystem_State_Power}}</td>
              <td class="TDClassTitle">液压站散热系统/运行指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Coolsystem_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor1_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor1_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站油泵电机2#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor2_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机2#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor2_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机3#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor3_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机3#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2Motor3_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站报警后强制启动模式</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2_Alarm_Forcesrun}}</td>
              <td class="TDClassTitle">液压站报警自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2_Alarm_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y3.Hstation2_Standby_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机倒计时</td>
              <td class="TDClassVal">{{dataList_Y3. Hstation2_Standby_Time}}</td>
            </tr>
            <tr style="font-size: 20px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: skyblue ">
              <td style="width: 20%;text-align: center">
                3#液压站
              </td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站散热系统/电源指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Coolsystem_State_Power}}</td>
              <td class="TDClassTitle">液压站散热系统/运行指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Coolsystem_State_Run}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Motor1_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机1#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Motor1_State_Run}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站油泵电机2#/电源指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Motor2_State_Power}}</td>
              <td class="TDClassTitle">液压站油泵电机2#/运行指示</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3Motor2_State_Run}}</td>
              <td class="TDClassTitle">液压站报警后强制启动模式</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3_Alarm_Forcesrun}}</td>
              <td class="TDClassTitle">液压站报警自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3_Alarm_Poweroff}}</td>
            </tr>
            <tr class="TrClass">
              <td class="TDClassTitle">液压站无动作自动关机标志</td>
              <td class="TDClassVal">{{dataList_Y4.Hstation3_Standby_Poweroff}}</td>
              <td class="TDClassTitle">液压站无动作自动关机倒计时</td>
              <td class="TDClassVal">{{dataList_Y4. Hstation3_Standby_Time}}</td>
            </tr>
          </table>
        </div>

      </div>
    </div>
</template>

<script>
import { GetDataY1 } from "@/api";
import { GetDataY2 } from "@/api";
import { GetDataY3 } from "@/api";
import { GetDataY4 } from "@/api";
    export default {
      name: 'DetailViews_Yeya',
      data() {
        return{
          dataList_Y1:{
            "Hstation0Coolsystem_Mode":"0", //液压站0#/液压站散热系统/工作模式/手动自动
            "Hstation0Coolsystem_State_Power":"1",//液压站0#/液压站散热系统/电源指示
            "Hstation0Coolsystem_State_Run":"0",//液压站0#/液压站散热系统/运行指示
            "Hstation0Motor1_State_Power":"1",//液压站0#/液压站油泵电机1#/电源指示
            "Hstation0Motor1_State_Run":"0",//液压站0#/液压站油泵电机1#/运行指示
            "Hstation0Motor2_State_Power":"1",//液压站0#/液压站油泵电机2#/电源指示
            "Hstation0Motor2_State_Run":"0",//液压站0#/液压站油泵电机2#/运行指示
            "Hstation0Motor3_State_Power":"1",//液压站0#/液压站油泵电机3#/电源指示
            "Hstation0Motor3_State_Run":"0",//液压站0#/液压站油泵电机3#/运行指示
            "Hstation0_Alarm_Forcesrun":"0",//液压站0#/液压站报警后强制启动模式
            "Hstation0_Alarm_Poweroff":"1",//液压站0#/液压站报警自动关机标志
            "Hstation0_Standby_Poweroff":"1",//液压站0#/液压站无动作自动关机标志
            "Hstation0_Standby_Time":"0"//液压站0#/液压站无动作自动关机倒计时
          },
          dataList_Y2:{
            "Hstation1Coolsystem_Mode":"0",//液压站1#/液压站散热系统/工作模式/手动自动
            "Hstation1Coolsystem_State_Power":"1",//液压站1#/液压站散热系统/电源指示
            "Hstation1Coolsystem_State_Run":"0",//液压站1#/液压站散热系统/运行指示
            "Hstation1Motor1_State_Power":"1",//液压站1#/液压站油泵电机1#/电源指示
            "Hstation1Motor1_State_Run":"0",//液压站1#/液压站油泵电机1#/运行指示
            "Hstation1Motor2_State_Power":"1",//液压站1#/液压站油泵电机2#/电源指示
            "Hstation1Motor2_State_Run":"0",//液压站1#/液压站油泵电机2#/运行指示
            "Hstation1_Alarm_Forcesrun":"0",//液压站1#/液压站报警后强制启动模式
            "Hstation1_Alarm_Poweroff":"0",//液压站1#/液压站报警自动关机标志
            "Hstation1_Standby_Poweroff":"1",//液压站1#/液压站无动作自动关机标志
            "Hstation1_Standby_Time":"0"//液压站1#/液压站无动作自动关机倒计时
          },
          dataList_Y3:{
            "Hstation2Coolsystem_Mode":"0",//液压站2#/液压站散热系统/工作模式/手动自动
            "Hstation2Coolsystem_State_Power":"1",//液压站2#/液压站散热系统/电源指示
            "Hstation2Coolsystem_State_Run":"0",//液压站2#/液压站散热系统/运行指示
            "Hstation2Motor1_State_Power":"1",//液压站2#/液压站油泵电机1#/电源指示
            "Hstation2Motor1_State_Run":"0",//液压站2#/液压站油泵电机1#/运行指示
            "Hstation2Motor2_State_Power":"1",//液压站2#/液压站油泵电机2#/电源指示
            "Hstation2Motor2_State_Run":"0",//液压站2#/液压站油泵电机2#/运行指示
            "Hstation2Motor3_State_Power":"1",//液压站2#/液压站油泵电机3#/电源指示
            "Hstation2Motor3_State_Run":"0",//液压站2#/液压站油泵电机3#/运行指示
            "Hstation2_Alarm_Forcesrun":"0",//液压站2#/液压站报警后强制启动模式
            "Hstation2_Alarm_Poweroff":"0",//液压站2#/液压站报警自动关机标志
            "Hstation2_Standby_Poweroff":"1",//液压站2#/液压站无动作自动关机标志
            "Hstation2_Standby_Time":"0"//液压站2#/液压站无动作自动关机倒计时
          },
          dataList_Y4:{
            "Hstation3Coolsystem_Mode":"0",//液压站3#/液压站散热系统/工作模式/手动自动
            "Hstation3Coolsystem_State_Power":"1",//液压站3#/液压站散热系统/电源指示
            "Hstation3Coolsystem_State_Run":"1",//液压站3#/液压站散热系统/运行指示
            "Hstation3Motor1_State_Power":"1",//液压站3#/液压站油泵电机1#/电源指示
            "Hstation3Motor1_State_Run":"0",//液压站3#/液压站油泵电机1#/运行指示
            "Hstation3Motor2_State_Power":"1",//液压站3#/液压站油泵电机2#/电源指示
            "Hstation3Motor2_State_Run":"0",//液压站3#/液压站油泵电机2#/运行指示
            "Hstation3_Alarm_Forcesrun":"0",//液压站3#/液压站报警后强制启动模式
            "Hstation3_Alarm_Poweroff":"0",//液压站3#/液压站报警自动关机标志
            "Hstation3_Standby_Poweroff":"1",//液压站3#/液压站无动作自动关机标志
            "Hstation3_Standby_Time":"0"//液压站3#/液压站无动作自动关机倒计时
          },
        }
      },
      mounted() {
        this.getData()
        this.timer = setInterval(() => {
          this.getData();
        }, window.config.HomeReloadTime);
      },
      methods: {
        getData() {
          GetDataY1().then(res => {
            var DataStr1 = res.data.split('<html><title>数据推送</title><body><p style="background-color:green; width:500px; word-break:break-all;white-space:normal;word-wrap:break-word;">')[1].split('</p></body></html>\r\n')[0]
            var DataJson1 = JSON.parse(DataStr1)
            this.dataList_Y1 = DataJson1.params
          });
          GetDataY2().then(res => {
            var DataStr2 = res.data.split('<html><title>数据推送</title><body><p style="background-color:green; width:500px; word-break:break-all;white-space:normal;word-wrap:break-word;">')[1].split('</p></body></html>\r\n')[0]
            var DataJson2 = JSON.parse(DataStr2)
            this.dataList_Y2 = DataJson2.params
          });
          GetDataY3().then(res => {
            var DataStr3 = res.data.split('<html><title>数据推送</title><body><p style="background-color:green; width:500px; word-break:break-all;white-space:normal;word-wrap:break-word;">')[1].split('</p></body></html>\r\n')[0]
            var DataJson3 = JSON.parse(DataStr3)
            this.dataList_Y3 = DataJson3.params
          });
          GetDataY4().then(res => {
            var DataStr4 = res.data.split('<html><title>数据推送</title><body><p style="background-color:green; width:500px; word-break:break-all;white-space:normal;word-wrap:break-word;">')[1].split('</p></body></html>\r\n')[0]
            var DataJson4 = JSON.parse(DataStr4)
            this.dataList_Y4 = DataJson4.params
          });
        },
      },
      filters: {
        Maincontactpole_Manual_Mode: function (value) {
          if (value==='0') {
            return '非手动模式'
          } else {
            return '手动模式'
          }
        },
        Maincontactpole_Manual_ModeSign: function (value) {
          if (value==='0') {
            return '模式未给定'
          } else {
            return '模式已给定'
          }
        },
        Maincontactpole_Manual_EnableSign: function (value) {
          if (value==='0') {
            return '使能未给定'
          } else if(value==='1') {
            return '使能已给定'
          }
        },
        Maincontactpole_Manual_Enable: function (value) {
          if (value==='0') {
            return '无使能'
          } else if(value==='1') {
            return '使能'
          }
        },
        ModeFun: function (value){
          if (value==='0') {
            return '自动'
          } else if(value==='1') {
            return '手动'
          }
        },
        //秒数转化为时分秒
        formatSeconds: function(value) {
          var secondTime = parseInt(value);// 秒
          var minuteTime = 0;// 分
          var hourTime = 0;// 小时
          if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
            //获取分钟，除以60取整数，得到整数分钟
            minuteTime = parseInt(secondTime / 60);
            //获取秒数，秒数取余，得到整数秒数
            secondTime = parseInt(secondTime % 60);
            //如果分钟大于60，将分钟转换成小时
            if(minuteTime > 60) {
              //获取小时，获取分钟除以60，得到整数小时
              hourTime = parseInt(minuteTime / 60);
              //获取小时后取余的分，获取分钟除以60取余的分
              minuteTime = parseInt(minuteTime % 60);
            }
          }
          if((secondTime+"").length===1){
            secondTime = "0" + secondTime
          }
          var result = "" + secondTime + "";

          if(minuteTime > 0) {
            if((minuteTime+"").length===1){
              minuteTime = "0" + minuteTime
            }
            result = "" + parseInt(minuteTime) + ":" + result;
          }
          if(hourTime > 0) {
            if((hourTime+"").length===1){
              hourTime = "0" + hourTime
            }
            result = "" + hourTime + ":" + result;
          }
          console.log('result',result);
          return result;
        }
      }
    }
</script>

<style lang='scss' scoped>
.mainDivClassYA{
  height: 100%;
  width: 100%;
  .topBox{
    height: 30%;
    width: 96%;
    margin-left: 2%;
    margin-top: 2%;
    border: 1px solid black;
    .leftBox{
      height: 100%;
      width: 30%;
      float: left;
      border: 1px solid black;
      .PictureClass{
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .TitleClass{
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #17FFFF;
      }
    }
    .rightBox{
      height: 100%;
      width: 70%;
      float: left;
      border: 1px solid black;
      .ValueTitleClass{
        width: 30%;
        height: 30%;
        display: flex;
        justify-content: left;
        margin-left: 2%;
        align-items: center;
        font-size: 25px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #BBE0F8;
        float: left;
      }
      .ValueClass{
        float: left;
        width: 20%;
        height: 30%;
        display: flex;
        justify-content: left;
        align-items: center;
        font-size: 30px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #17FFFF;
      }
    }
  }
  .bottomBox{
    height: 58%;
    width: 96%;
    margin-left: 2%;
    border: 1px solid black;
    .tableDiv{
      height: 100%;
      width: 100%;
      .tableClass{
        width: 100%;
        border: 1px solid white;
        .TrClass{
          height: 40px;
          line-height: 38px;
          width: 100%;
          margin-top: 5%;
          border: 1px solid white;
          .TDClassTitle{
            height: 100%;
            border: 1px solid white;
            width: 20%;
            text-align: center;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #BBE0F8;
          }
          .TDClassVal{
            text-align: center;
            height: 100%;
            border: 1px solid white;
            width: 3%;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #17FFFF;
          }
        }
      }
    }
  }
}
</style>
